import BorderBox from '@jiaminghi/data-view-react/es/borderBox1'
import Decoration from '@jiaminghi/data-view-react/es/decoration10'
import { FC, Fragment } from 'react'

const Label: FC<
  React.HTMLAttributes<HTMLElement> & { title: string; divider?: boolean; noBorder?: boolean }
> = props => {
  const Comp = props.noBorder ? Fragment : BorderBox
  return (
    <div className={props.className}>
      <Comp>
        <div className="flex flex-col h-full">
          <div className="h-12 flex items-center px-8 pt-3">
            <i
              className="w-3 h-3 mr-2 rounded-3"
              style={{ backgroundImage: 'radial-gradient(circle, #0FC5F9e8 20%, #0C4A88 80%)' }}
            />
            <span className="font-semibold">{props.title}</span>
          </div>
          {props.divider && (
            <div className="flex-ac">
              <Decoration style={{ width: 'calc(100% - 16px)', height: '2px' }} />
            </div>
          )}
          <div className="flex-1 px-4 py-2"> {props.children}</div>
        </div>
      </Comp>
    </div>
  )
}

export default Label
